import React from 'react';
import { Button, InputItem, List, WhiteSpace, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
import { connect } from 'dva';
import { Helmet } from 'react-helmet';
import styles from './LoginPage.css';

class ResetPasswordPage extends React.Component {
  reset = () => {
    this.props.form.validateFields((error, values) => {
      if (error) return;
      this.props.dispatch({
        type: 'auth/resetPassword',
        payload: values,
      });
    });
  };

  render() {
    const { getFieldProps } = this.props.form;
    const { phone } = this.props.auth.currentUser;
    return (
      <div>
        <Helmet>
          <title>
            修改密码
          </title>
        </Helmet>

        <div className={styles.phone}>
          当前帐号：{phone}
        </div>
        <WhiteSpace style={{ backgroundColor: 'rgb(250, 250, 250)' }} />
        <List>
          <InputItem
            {...getFieldProps('oldPassword')}
            type="password"
            placeholder="请输入旧密码"
          />
          <InputItem
            {...getFieldProps('password')}
            type="password"
            placeholder="请输入新密码"
          /><InputItem
            {...getFieldProps('confirmPassword')}
            type="password"
            placeholder="请确认新密码"
          />
        </List>
        <WhiteSpace size="xl" />
        <WingBlank>
          <Button type="primary" onClick={this.reset} style={{ backgroundColor: 'rgb(5, 173, 205)' }}>确认修改</Button>
        </WingBlank>
      </div>
    );
  }
}

export default connect(({ auth }) => ({ auth }))(createForm()(ResetPasswordPage));

